<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1,
				   maximum-scale=1, user-scalable=0">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <!-- <script src="js/vendor/jquery-2.1.0.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
    <script src="intro.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="bootstrap-theme.min.css"> -->
    <!-- <script src="jquery-2.1.0.js"></script> -->
    <!-- <script src="bootstrap.min.js"></script> -->
    <!-- <script src="knockout-3.1.0.js"></script> -->
    <!-- <link rel="stylesheet" href="stylesheet/normalize.css"> -->
    <!-- <script src="js/vendor/modernizr.js"></script> -->
    <link href="introjs.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
  </head>
  <body onselectstart="return false;">
    <!-- Add your site or application content here -->
    <H1 data-bind="text: strings().title">SUDOKU</H1>
    <div id="template-container" >
      <table id="game-pane" class="game-pane" tabindex="0" 
	     data-bind="with: board">
        <tr class="row">
          <td class="corner-cell"></td>
          <!-- ko foreach: 'ABCDEFGHI' -->
          <td class="top-cell">
            <span data-bind="text:$data"></span>
          </td>
          <!-- /ko -->
          <td class="corner-cell"></td>
        </tr>

        <!-- ko foreach: {data: cells, as: 'row'} -->
        <tr class="row">
          <td class="side-cell">
            <span data-bind="text: $index()+1"></span>
          </td>
          <!-- ko foreach: {data: row, as: 'cell'} -->
          <td data-bind="attr: {'class': borderClass}" tabindex='0'>
            <span  data-bind="text: stringValue,
                             css: {centered: isNotMarker},
                             style: {background: background, color: color}"
                             ></span>
            <div class="owner-flag" data-bind="style: {background: $root.getBackground(owner())},
                                               visible: showOwnerFlag"></div>
              
          </td>
          <!-- /ko -->
          <td class="side-cell">
            <span data-bind="text: $index()+1"></span>
          </td>

        </tr>
        <!-- /ko -->
        <tr class="row">
          <td class="corner-cell"></td>
          <!-- ko foreach: 'ABCDEFGHI' -->
          <td class="top-cell">
            <span data-bind="text: $data"></span>
          </td>
          <!-- /ko -->
          <td class="corner-cell"></td>
        </tr>
      </table> 

      <div id="controls">
        <div id="play-control" data-bind="visible: mode() == playMode,
					  with: playMode">
          <table data-bind="style: {'visibility': playing()?'':'hidden'}">
            <tbody>
	      <!-- ko  foreach: {data: [0,1,2], as: 'row'} -->
              <tr class="row">
                <!-- ko foreach: {data: [0,1,2], as: 'col'} -->
                <td data-bind="with: $root.playMode.controlButtons[row*3+col]">
                  <button class="digit-button" data-bind="text: value,
                                                          css: {green: enabled}"></button>
                </td>
                <!-- /ko -->
              </tr>
	      <!-- /ko -->
            </tbody>
          </table>

          <div data-bind="foreach: $root.users.userList" id="user-list"> <!-- Allow user to choose which teammate's acitivities will be followed. -->
            <div class="checkbox">
              <label>
                <input type="checkbox" data-bind="checked: state">
                <span data-bind="text: name"></span>
              </label>
            </div>
          </div>

          <div id="new-game-menu" class="btn-group dropup open">
            <button id="newgame" type="button" class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown" data-bind="text: $root.strings()['newGame']">
              New Game <span class="caret"></span>
            </button>
            <ul class="dropdown-menu small-menu" role="menu" 
		data-bind="foreach: $root.newGameMethods">
              <li class="new-game" data-bind="attr: {id: 'newgame-'+name}"><span data-bind="text: $root.strings()[name]"></span></li>
            </ul>

            <!-- reset game button, confirmation dialog -->
            <!-- Button trigger modal -->
            <button class="btn btn-default btn-block" data-toggle="modal" data-target="#myModal" data-bind="text: $root.strings().restart, style: {'visibility': playing()?'':'hidden'}">
              Restart
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel" data-bind="text: $root.strings().resConfirm">Are you sure to start over?</h4>
                  </div>
                  <div class="modal-body">
                    <span data-bind="text: $root.strings().resWarning">Restarting the puzzle will lose all the progress that you have made!</span>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" data-bind="text: $root.strings().cancel">Cancel</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: $root.playMode.restartGame"><span data-bind="text: $root.strings().restart">Restart</span></button>
                  </div>
                </div>
              </div>
            </div>

          </div> 
        </div> <!-- end of "play-controls" -->

        <div id="manual-entry" data-bind="visible: mode().name == 'Edit', with: gameEditor">
          <textarea rows="9" data-bind="value: editedGameString, valueUpdate: 'input'"></textarea>
          <div class="btn-group">
            <button class="btn btn-block" data-bind="click: $root.startNewGame, text:$root.strings().start">Start</button>
            <button class="btn btn-block" data-bind="click: $root.cancelEdit, text: $root.strings().cancel">Cancel</button>
          </div>
        </div>
	
        <div id="local-list" data-bind="visible: mode().name == 'List', with: puzzleChooser">
          <div class="form-group">
            <label for="difficult-level">
              <span data-bind="text: $root.strings().listtitle">Puzzle ID</span>
              <span style="font-size: 90%" data-bind="text: '(1 -' + puzzleList.length + ')'"></span>
            </label>

            <input  type="number" class="form-control" min='1'
                    data-bind="value: puzzleID,
                               attr: {max: puzzleList.length},
                               valueUpdate: 'input'">
          </div>
          <span style="font-size: 60%; width: 100%" data-bind="text: $root.strings().hint">The heart shaped puzzle is puzzle #51.</span>
          <div class="btn-group">
            <button class="btn btn-block" data-bind="click: $root.startNewGame, text: $root.strings().start">Start</button>
            <button class="btn btn-block" data-bind="click: $root.cancelEdit, text: $root.strings().cancel">Cancel</button>
          </div>
        </div>          
      </div>
    </div>
    <!-- <script src="static/js/libs/hangup_client.js"></script>             -->
    <!-- <script src="main.js"></script> -->
    <script src="//plus.google.com/hangouts/_/api/v1/hangout.js"></script>    
    <script src="sudoku.js"></script>
    <script src="help.js"></script>
    <script>
      startIntro();
    </script>
  </body>
</html>
